<html>

<head>
	<title>HTML5 3D Graph</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">

	<link href="resources/styles.css" rel="stylesheet" type="text/css" />
	<link href="resources/testStyles.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="resources/glMatrix-0.9.5.min.js" ></script>
	<script type="text/javascript" src="resources/webgl-utils.js" ></script>
	<script type="text/javascript" src="resources/jquery-1.6.1.min.js" ></script>

	<script type="text/javascript" src="resources/script.js" ></script>
	<script type="text/javascript" src="resources/glScript.js" ></script>
	<script type="text/javascript" src="resources/presentation.js" ></script>
	<script type="text/javascript" src="resources/eventHandling.js" ></script>
	<script type="text/javascript" src="resources/glModels.js" ></script>
	<script type="text/javascript" src="resources/dataModel.js" ></script>
	<script type="text/javascript" src="resources/testHarness.js" ></script>

	<script id="shader-fs" type="x-shader/x-fragment">
		#ifdef GL_ES
		precision highp float;
		#endif

		varying vec4 vColor;

		void main(void) {
			gl_FragColor = vColor;
		}
	</script>

	<script id="shader-vs" type="x-shader/x-vertex">
		attribute vec3 aVertexPosition;
		attribute vec4 aVertexColor;

		uniform mat4 uMVMatrix;
		uniform mat4 uPMatrix;

		varying vec4 vColor;

		void main(void) {
			gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
			vColor = aVertexColor;
		}
	</script>

</head>

<body>

<div class="wrap">

	<canvas id="Canvas3D" width="600" height="300"></canvas>

	<h1>HTML 5 3D Graph</h1>
	<p>Framerate: <span id="framerate">0</span></p>

	<h2>Selected Data Point</h2>
	<p>
		&quot;<span id="selection-zval"></span>&quot; - <span id="selection-xval"></span>: <span id="selection-yval"></span> occurrences.
	</p>

	<h2>Dev Tools</h2>
	<ul>
		<li>
			<a id="test-addDP-heading" href="#">Add Data Point</a>
			<div id="test-addDP-div">
				z val:<input id="test-addDP-z" class="test-input" type="text" value=""/>
				x val:<input id="test-addDP-x" class="test-input" type="text" value=""/>
				y amount:<input id="test-addDP-y" class="test-input-short" type="text" value=""/>
				<button id="test-add-data-point" type="button">Add</button>
			</div>
		</li>
		<li>
			<a id="test-profile-drawScene-heading" href="#">Profile drawScene</a>
			<div id="test-profile-drawScene-div">
				<button id="test-profile-drawScene-start" type="button">Start Profiling</button>
				<button id="test-profile-drawScene-stop" type="button">Start Profiling</button>
				<div id="test-profile-drawScene-result">
				</div>
			</div>
		</li>
	</ul>

</div>

</body>
</html>